<script setup>

import {useUserInfoStore} from "@/stores/userInfo.js";
import {updateUser, userInfo} from "@/api/user.js";
import {ElMessage} from "element-plus";
import {ref} from "vue";

const formLabelWidth = '300px'

const formData = ref({
  id: '',
  password:'',
  gender:'',
  name:'',
  email:''
})


const userInfoStore = useUserInfoStore();
const getUserInfo = ()=>{
  userInfo ().then(res=>{
    userInfoStore.setUserInfo(res.data)
    formData.value = { ...res.data };
  })
}
getUserInfo()


const editUser= ()=>{
  updateUser(formData.value).then(res =>{
    if (res.status) {
      getUserInfo()
      ElMessage.success("更新成功")
      dialogFormVisible.value = false
    }
  })
}

const rules = {
  id: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 5, max: 16, message: '长度为5-16位', trigger: 'blur'},
  ],
  email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {type: "email", message: '邮箱格式不正确', trigger: 'blur'},
  ],
  gender:[
    {required: true, message: '请选择性别', trigger: 'change'},
  ],
  role:[
    {required: true, message: '请选择权限', trigger: 'change'},
  ],
  name:[
    {required: true, message: '请选择姓名', trigger: 'change'},
  ]
}
</script>

<template>

    <el-form ref="form" :model="formData"  label-position="top" :rules="rules">

      <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
        <el-input v-model="formData.name" autocomplete="off" placeholder="请输入姓名" />
      </el-form-item>

      <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
        <el-select v-model="formData.gender" placeholder="请选择性别">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>

      <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
        <el-input v-model="formData.email" autocomplete="off" placeholder="请输入邮箱" />
      </el-form-item>

      <el-button type="primary" @click="editUser">保存修改</el-button>
    </el-form>

</template>

<style scoped>

</style>